<template>
    <div>
        <input id="trix" type="hidden" :name="name" :value="value">

        <trix-editor :id="itemId" ref="trix" input="trix" :placeholder="placeholder"></trix-editor>
    </div>
</template>

<script>
    import Trix from 'trix'

    export default {
        props: ['name', 'value', 'placeholder', 'shouldClear', 'itemId'],

        mounted() {
            this.$refs.trix.addEventListener('trix-change', e => {
                this.$emit('input', e.target.innerHTML);
            });

            this.$watch('shouldClear', () => {
                this.$refs.trix.value = '';
            });
        }
    }
</script>

<style scoped>

</style>